<style>
    .skin-list li{
        float:left; width: 33.33333%; padding: 5px;
    }
    .skin-list li a{
        display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4);
    }
    .skin-common0{
        display:block;
        width: 20%;
        float: left;
        height: 20px;
    }
    .skin-common1{
        display:block;
        width: 20%;
        float: left;
        height: 20px;
        background: #222d32;
    }
    .skin-common2{
        display:block;
        width: 80%;
        float: left;
        height: 20px;
        background: #f4f5f7;
    }
    .skin-common3{
        display:block;
        width: 20%;
        float: left;
        height: 7px;
    }
    .skin-common4{
        display:block;
        width: 80%;
        float: left;
        height: 7px;
    }
    .skin-background-black{
        background: #222d32;
    }
    .skin-list li a span {
        display: block;
        float: left;
    }
</style>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
        <li class="active"><a href="#control-sidebar-setting-tab" data-toggle="tab" aria-expanded="true"><i class="fa fa-wrench"></i></a></li>
        <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
        <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <!-- Home tab content -->
        <div class="tab-pane active" id="control-sidebar-setting-tab">
            <h4 class="control-sidebar-heading">{:__('Layout Options')}</h4>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-layout="fixed" class="pull-right"> {:__('Fixed Layout')}</label><p>{:__("You can't use fixed and boxed layouts together")}</p></div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-layout="layout-boxed" class="pull-right"> {:__('Boxed Layout')}</label><p>{:__('Activate the boxed layout')}</p></div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-layout="sidebar-collapse" class="pull-right"> {:__('Toggle Sidebar')}</label><p>{:__("Toggle the left sidebar's state (open or collapse)")}</p></div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-enable="expandOnHover" class="pull-right"> {:__('Sidebar Expand on Hover')}</label><p>{:__('Let the sidebar mini expand on hover')}</p></div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-menu="show-submenu" class="pull-right"> {:__('Show sub menu')}</label><p>{:__('Always show sub menu')}</p></div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-menu="disable-top-badge" class="pull-right"> {:__('Disable top menu badge')}</label><p>{:__('Disable top menu badge without left menu')}</p></div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-controlsidebar="control-sidebar-open" class="pull-right"> {:__('Toggle Right Sidebar Slide')}</label><p>{:__('Toggle between slide over content and push content effects')}</p></div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-sidebarskin="toggle" class="pull-right"> {:__('Toggle Right Sidebar Skin')}</label><p>{:__('Toggle between dark and light skins for the right sidebar')}</p></div>
            <h4 class="control-sidebar-heading">{:__('Skins')}</h4>
            <ul class="list-unstyled clearfix skin-list">

                <li><a href="javascript:;" data-skin="skin-black-blue" class="clearfix full-opacity-hover"><div><span style="width: 20%; height: 27px; background: #000;"><span style="width: 100%; height: 3px; margin-top:10px; background: #007bff;"></span></span><span style="width: 80%; height: 27px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Black Blue</p></li>
                <li><a href="javascript:;" data-skin="skin-black-brown" class="clearfix full-opacity-hover"><div><span style="width: 20%; height: 27px; background: #000;"><span style="width: 100%; height: 3px; margin-top:10px; background: #993333;"></span></span><span style="width: 80%; height: 27px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Black Brown</p></li>
                <li><a href="javascript:;" data-skin="skin-black-purple" class="clearfix full-opacity-hover"><div><span style="width: 20%; height: 27px; background: #000;"><span style="width: 100%; height: 3px; margin-top:10px; background: #555299;"></span></span><span style="width: 80%; height: 27px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Black Purple</p></li>
                <li><a href="javascript:;" data-skin="skin-black-green" class="clearfix full-opacity-hover"><div><span style="width: 20%; height: 27px; background: #000;"><span style="width: 100%; height: 3px; margin-top:10px; background: #00a65a;"></span></span><span style="width: 80%; height: 27px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Black Green</p></li>
                <li><a href="javascript:;" data-skin="skin-black-red" class="clearfix full-opacity-hover"><div><span style="width: 20%; height: 27px; background: #000;"><span style="width: 100%; height: 3px; margin-top:10px; background: #e74c3c;"></span></span><span style="width: 80%; height: 27px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Black Red</p></li>
                <li><a href="javascript:;" data-skin="skin-black-yellow" class="clearfix full-opacity-hover"><div><span style="width: 20%; height: 27px; background: #000;"><span style="width: 100%; height: 3px; margin-top:10px; background: #e08e0b;"></span></span><span style="width: 80%; height: 27px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Black Yellow</p></li>

                <li><a href="javascript:;" data-skin="skin-blue-white" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-blue"></span><span class="bg-white skin-common4"></span></div><div><span class="skin-common1 bg-blue"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Blue_white</p></li>
                <li><a href="javascript:;" data-skin="skin-brown-white" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-brown"></span><span class="bg-white skin-common4"></span></div><div><span class="skin-common0 bg-brown"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Brown_white</p></li>
                <li><a href="javascript:;" data-skin="skin-purple-white" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-purple"></span><span class="bg-white  skin-common4"></span></div><div><span class="skin-common1 bg-purple"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Purple_white</p></li>
                <li><a href="javascript:;" data-skin="skin-green-white" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-green"></span><span class="bg-white  skin-common4"></span></div><div><span class="skin-common1 bg-green"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Green_white</p></li>
                <li><a href="javascript:;" data-skin="skin-red-white" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-red"></span><span class="bg-white  skin-common4"></span></div><div><span class="skin-common1 bg-red"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Red_white</p></li>
                <li><a href="javascript:;" data-skin="skin-yellow-white" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-yellow"></span><span class="bg-white  skin-common4"></span></div><div><span class="skin-common1 bg-yellow"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Yellow_white</p></li>

                <li><a href="javascript:;" data-skin="skin-blue" class="clearfix full-opacity-hover"><div><span class="skin-common3" style=" background: #007bff;"></span><span class="bg-light-blue skin-common4"></span></div><div><span class="skin-common1"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Blue</p></li>
                <li><a href="javascript:;" data-skin="skin-brown" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-brown"></span><span class="skin-common4 bg-brown"></span></div><div><span class="skin-common1"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Brown</p></li>
                <li><a href="javascript:;" data-skin="skin-purple" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-purple-active"></span><span class="bg-purple skin-common4"></span></div><div><span class="skin-common1"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Purple</p></li>
                <li><a href="javascript:;" data-skin="skin-green" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-green-active"></span><span class="bg-green skin-common4"></span></div><div><span class="skin-common1"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Green</p></li>
                <li><a href="javascript:;" data-skin="skin-red" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-red-active"></span><span class="bg-red skin-common4"></span></div><div><span class="skin-common1"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Red</p></li>
                <li><a href="javascript:;" data-skin="skin-yellow" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-yellow-active"></span><span class="bg-yellow skin-common4"></span></div><div><span class="skin-common1"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Yellow</p></li>

                <li><a href="javascript:;" data-skin="skin-blue-light" class="clearfix full-opacity-hover"><div><span class="skin-common3" style=" background: #007bff;"></span><span class="bg-light-blue skin-common4"></span></div><div><span class="skin-common0" style="background: #f9fafc;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Blue_Light</p></li>
                <li><a href="javascript:;" data-skin="skin-brown-light" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-brown"></span><span class="skin-common4 bg-brown"></span></div><div><span class="skin-common0" style="background: #f9fafc;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Brown_Light</p></li>
                <li><a href="javascript:;" data-skin="skin-purple-light" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-purple-active"></span><span class="bg-purple skin-common4"></span></div><div><span class="skin-common0" style="background: #f9fafc;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Purple_Light</p></li>
                <li><a href="javascript:;" data-skin="skin-green-light" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-green-active"></span><span class="bg-green skin-common4"></span></div><div><span class="skin-common0" style="background: #f9fafc;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Green_Light</p></li>
                <li><a href="javascript:;" data-skin="skin-red-light" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-red-active"></span><span class="bg-red skin-common4"></span></div><div><span class="skin-common0" style="background: #f9fafc;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Red_Light</p></li>
                <li><a href="javascript:;" data-skin="skin-yellow-light" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-yellow-active"></span><span class="bg-yellow skin-common4"></span></div><div><span class="skin-common0" style="background: #f9fafc;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin" style="font-size: 12px;">Yellow_Light</p></li>

                <li><a href="javascript:;" data-skin="skin-blue-full" class="clearfix full-opacity-hover"><div><span class="skin-common3" style=" background: #007bff;"></span><span class="bg-light-blue skin-common4"></span></div><div><span class="skin-common0" style="background: #007bff;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Blue_Full</p></li>
                <li><a href="javascript:;" data-skin="skin-brown-full" class="clearfix full-opacity-hover"><div><span class="skin-common3" style=" background: #993333;"></span><span class="skin-common4" style="background: #993333;"></span></div><div><span class="skin-common0" style="background: #993333;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Brown_Full</p></li>
                <li><a href="javascript:;" data-skin="skin-purple-full" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-purple-active"></span><span class="bg-purple skin-common4"></span></div><div><span class="skin-common0" style="background: #605ca8;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Purple_Full</p></li>
                <li><a href="javascript:;" data-skin="skin-green-full" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-green-active"></span><span class="bg-green skin-common4"></span></div><div><span class="skin-common0" style="background: #00a65a;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Green_Full</p></li>
                <li><a href="javascript:;" data-skin="skin-red-full" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-red-active"></span><span class="bg-red skin-common4"></span></div><div><span class="skin-common0" style="background: #e43321;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Red_Full</p></li>
                <li><a href="javascript:;" data-skin="skin-yellow-full" class="clearfix full-opacity-hover"><div><span class="skin-common3 bg-yellow-active"></span><span class="bg-yellow skin-common4"></span></div><div><span class="skin-common0" style="background: #f39c12;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Yellow_Full</p></li>

                <li><a href="javascript:;" data-skin="skin-white-light" class="clearfix full-opacity-hover"><div><span class="skin-common3" style=" background: #fefefe;"></span><span class="skin-common4" style="background: #fefefe;"></span></div><div><span class="skin-common0" style="background: #f9fafc;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin" style="font-size: 12px">White_Light</p></li>
                <li><a href="javascript:;" data-skin="skin-silver-full" class="clearfix full-opacity-hover"><div><span class="skin-common3" style=" background: #c0c0c0;"></span><span class="skin-common4" style="background: #c0c0c0;"></span></div><div><span class="skin-common0" style="background: #c0c0c0;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">silver_Full</p></li>
                <li><a href="javascript:;" data-skin="skin-black" class="clearfix full-opacity-hover"><div><span class="skin-common3" style=" background: #2c3e50;"></span><span class="skin-common4" style="background: #2c3e50;"></span></div><div><span class="skin-common0" style="background: #222;"></span><span class="skin-common2"></span></div></a><p class="text-center no-margin">Black</p></li>

                <li><a href="javascript:;" data-skin="skin-forest" class="clearfix full-opacity-hover"><div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #364d98"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #364d98"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #364d98"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #364d98;"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Forest</p></li>
                <li><a href="javascript:;" data-skin="skin-universe" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;background: #40a7a6;" class="bg-universe-active"></span><span class="bg-universe" style="display:block; width: 80%; float: left; height: 7px;background: #40a7a6;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #40a7a6;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #40a7a6;"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Universe</p></li>
                <li><a href="javascript:;" data-skin="skin-snow" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;background: #406f8e;" class="bg-snow-active"></span><span class="bg-snow" style="display:block; width: 80%; float: left; height: 7px;background: #406f8e;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #406f8e;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #406f8e;"></span></div></a><p class="text-center no-margin" style="font-size: 12px;">Snow</p></li>
                <li><a href="javascript:;" data-skin="skin-season" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px; background: #0099e5;"></span><span class="bg-season" style="display:block; width: 80%; float: left; height: 7px;background: #0099e5;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #0099e5;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #0099e5;"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Season</p></li>
                <li><a href="javascript:;" data-skin="skin-mountain" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;background: #9273b6;" class="bg-mountain-active"></span><span class="bg-mountain" style="display:block; width: 80%; float: left; height: 7px;background: #9273b6;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #9273b6;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #9273b6"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Mountain</p></li>
                <li><a href="javascript:;" data-skin="skin-earth" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;background: #7e3f1c;" class="bg-earth-active"></span><span class="bg-earth" style="display:block; width: 80%; float: left; height: 7px;background: #7e3f1c;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #7e3f1c;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #7e3f1c;"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Earth</p></li>

            </ul>
        </div>
        <!-- /.tab-pane -->
        <!-- Home tab content -->
        <div class="tab-pane" id="control-sidebar-home-tab">
            <h4 class="control-sidebar-heading">{:__('Home')}</h4>
        </div>
        <!-- /.tab-pane -->
        <!-- Settings tab content -->
        <div class="tab-pane" id="control-sidebar-settings-tab">
            <h4 class="control-sidebar-heading">{:__('Setting')}</h4>
        </div>
        <!-- /.tab-pane -->
    </div>
</aside>
<!-- /.control-sidebar -->